  <template>
<div class="app-container">
<el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="手机号">
    <el-input v-model="formInline.user" placeholder="手机号"></el-input>
  </el-form-item>
 
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>


    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="卡序列号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="奖品等级"
        width="180">
      </el-table-column>
      <el-table-column label="兑换状态" width="80">
        <template slot-scope="scope">
            <div v-if="scope.row.encashstate == '10'">
                未领取
            </div>
             <div v-if="scope.row.encashstate == '11'">
                已领取
            </div>
             <div v-if="scope.row.encashstate == '00'">
                未兑换
            </div>
             <div v-if="scope.row.encashstate == '01'">
                已兑换
            </div>
            已兑换
        </template>
    </el-table-column>
      <el-table-column
        prop="address"
        label="受理点">
      </el-table-column>
       <el-table-column fixed="right" label="操作" width="200">
             <template slot-scope="scope">          
               <el-button type="primary" @click="dialogFormVisible = true">兑奖</el-button>                   
             </template>
          </el-table-column>
    </el-table>
    <div>
      

        <el-dialog title="领奖" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="奖品等级" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择礼品" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择礼品">
                <el-option label="礼品一" value="shanghai"></el-option>
                <el-option label="礼品二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</div>
  </template>

  <script>
    export default {
      data() {
        return {
         
          tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                encashstate: '00'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                encashstate: '00'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                encashstate: '00'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                encashstate: '00'
              }],
          formInline: {
             user: 'ggrhr',
             region: 'gwrw'
          },
          dialogFormVisible: false,
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
           }
      }
      },
      created (){

      },
      methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
    }
  </script>